'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Card, Col, DatePicker, Drawer, Form, Input, Row, Select, Statistic, Table} from 'antd';
import styles from '../../../index.less';
import ViewTitle from '../../../../components/ViewTitle';
import FormBase from '../../../../components/Base/FormBase';
import {FormField, SearchForm} from 'antd-extra';
import moment from 'moment';
import 'moment/locale/zh-cn';
import ModalSalesOrderPayDetail from "./ModalSalesOrderPayDetail";

moment.locale('zh-cn');
const {RangePicker} = DatePicker;
const _ = require('lodash');

const table = 'SalesOrder';
const title = '采购付款申请单';
const {Option} = Select;

const path = "auxiliaryMaterialFee";
const reviewPath = "auxMaterialReviewStatus"
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            procure,
            finance
          }) => ({...user, ...global, ...procure, ...finance, ...dynamicLabel}))
export default class XAuxMaterialDataFace extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {

      if (value === '') {
        payload[key] = undefined;
      }
    });
    const {dispatch, isPayReview, payReviewPath} = this.props;
    dispatch && dispatch({
      type: 'global/getModel',
      payload: {table}
    });
    /**
     * 采购和订单审核通过后，自动创建付款申请表
     * @type {string}
     */
  //  payload["reviewStatus"] = "同意";
    payload["path"] = path;
    //if (isPayReview) payload[reviewPath] = '同意';
    dispatch && dispatch({
      type: 'finance/findPaymentMany',
      payload
    });

  }

  getSearchFields = () => {
    const {title} = this.props;
    return [
      <FormField
        label="订单编码"
        name="code"
        key={1}
      >
        <Input allowClear placeholder={`请输入`}/>
      </FormField>,
      <FormField
        label="客户"
        name="customer"
        key={2}
      >
        <Input allowClear placeholder="请输入"/>
      </FormField>,

      <FormField
        label="创建时间"
        name="createdTs"
        key={3}
        initialValue={[this.getSearchStart1Months(), this.getDefaultSearchEndDate()]}
      >
        <RangePicker allowClear={true}
          // style={{ width: '150%' }}
        />
      </FormField>

    ];
  };

  cols() {
    const {isPayReview,title} = this.props;
    const temp = [
      {title: '订单编码', dataIndex: 'code', key: 'code'},
      {title: '订单类型', dataIndex: 'projectType', key: 'projectType'},
      {title: '销售公司', dataIndex: 'division', key: 'division'},
      {title: '客户', dataIndex: 'customer', key: 'customer'},
      {title: '重量（KG）', dataIndex: 'count', key: 'count'},
      {title: title, dataIndex: path, key: path}
    ];
    isPayReview && temp.push({
      title: '付款审核状态',
      dataIndex: reviewPath,
      key: reviewPath
    });
    temp.push(...[

      {title: '业务员', dataIndex: 'salesman', key: 'salesman'},
      {
        title: '创建时间', dataIndex: 'createdTs', key: 'createdTs', render: value => {
          return <div>{moment(value).format('YYYY-MM-DD')}</div>;
        }
      },
      {
        title: '操作', dataIndex: 'operation', key: 'operation',
        width: 160, fixed: 'right',
        render: (value, record) => {
          return (
            <span>
            {<a style={{marginRight: '6px'}}
                onClick={() => this.setState({showDetail: true, record})}>详情</a>}
                    </span>
          );
        }
      }
    ]);
    return temp;
  }

  render() {
    const {statistic = {}, _notify, title, mainCost = [], form} = this.props;
    const {showDetail, record = {}, current = 1, loading, total = 0} = this.state;

    // if (_notify) {
    //   notify(_notify);
    // }
    const {amount = 0, data = 0} = mainCost;
    const model = this.props['SalesOrderModel'];
    const cols = this.getTableColumns(model);
    cols.push({
      title: '操作', dataIndex: 'operation', key: 'operation',
      width: 160, fixed: 'right',
      render: (value, record) => {
        return (
          <span>
            {<a style={{marginRight: '6px'}}
                onClick={() => this.setState({showDetail: true, record})}>详情</a>}
            </span>
        );
      }
    });
    return (
      <Form>
        <ViewTitle
          title={`${title}列表`}
          level={1}
          // actions={[
          //   // <Button onClick={() => this.export()}>导出</Button>,
          //   <Button type="primary" onClick={() => this.onCreateOrEdit(undefined)}>添加</Button>]}
        >
        </ViewTitle>
        <SearchForm
          style={{marginLeft: '6px', marginRight: '6px'}}
          onSearch={() => {
            this.state.current = 1;
            this.componentDidMount();
          }}
          onReset={this.handleReset}
          cols={3}
          min={6}
          expandText="展开"
          form={form}
        >
          {this.getSearchFields()}
        </SearchForm>
        <div style={{background: '#ECECEC', padding: '30px'}}>
          <Row gutter={16}>
            <Col span={12}>
              <Card>
                <Statistic
                  title={`${title}总金额`}
                  value={amount}
                  precision={2}
                  valueStyle={{color: '#3f8600'}}
                  suffix="元"
                />
              </Card>
            </Col>

          </Row>
        </div>
        <Table
          loading={loading}
          className={styles.antTable}
          bordered={true}
          columns={this.cols()}
          dataSource={data}
          scroll={{x: true}}
          pagination={{
            current: this.state.current,
            total: this.state.total,
            showSizeChanger: true,
            onChange: page => {
              this.state.current = page;
              this.componentDidMount();
            },
            onShowSizeChange: (current, pageSize) => {
              this.state.current = 1;
              this.state.pageSize = pageSize;
              this.componentDidMount();
            }
          }}
          // pagination={{pageSize: 100}}
          //scroll={{ x: 1300 }}
        ></Table>

        {showDetail && <Drawer
          visible={showDetail}
          title={`${title}详情`}
          placement="left"
          width={'80%'}
          style={{padding: 0}}
          onClose={() => {
            this.setState({showDetail: false});
          }}
        >
          <ModalSalesOrderPayDetail
            treeId={this.props.treeId}
            title={this.props.title}
            isPayReview={this.props.isPayReview}
            reviewPath={reviewPath}
            isFinance={this.props.isFinance}
            values={record}
            callback={() => this.componentDidMount()}
          > </ModalSalesOrderPayDetail>
        </Drawer>}
      </Form>
    );
  }
}
